<template>
  <van-tabbar v-model="active" route active-color="#FD7753">
    <van-tabbar-item
      v-for="(item, index) in tabArr"
      :key="index"
      :to="`/${item.title}`"
    >
      <span>{{ item.title }}</span>
      <template #icon="props">
        <img :src="props.active ? item.icon1 : item.icon" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref } from "vue";
//vite提供的能力将相对路径，转为绝对路径
function getImageUrl(name: string, act?: boolean) {
  return new URL(
    `../assets/img/${name}_icon${act ? "_act" : ""}.png`,
    import.meta.url
  ).href;
}
const active = ref(1);
type TabType = {
  title: string;
  icon: string;
  icon1: string;
};
const tabArr = ref<Array<TabType>>([]);
let arr = ["home", "job", "mine"];
arr.forEach((item) => {
  tabArr.value.push({
    title: item,
    icon: getImageUrl(item),
    icon1: getImageUrl(item, true),
  });
});
</script>

<style scoped></style>
